<script setup lang="ts">
import { onMounted, ref } from "vue";
import MetadataDescription from "../components/MetadataDescription.vue";
import { Namespace } from "../../../api/k8s/types";
import nsProvider from "./nsProvider";
import PodConditions from "../pod/widgets/PodConditions.vue";

const { getNamespaceDetails } = nsProvider;

type Props = {
  name?: string;
};

const props = defineProps<Props>();

const loading = ref(false);
const namespace = ref<Namespace>();

const reloadNamespaceInfo = async (name?: string) => {
  loading.value = true;

  const res = await getNamespaceDetails(name);
  namespace.value = res.data;

  loading.value = false;
};

const activeTab = ref("metadata");

onMounted(() => {
  reloadNamespaceInfo(props.name);
});
</script>

<template>
  <div v-loading="loading" class="details-wrapper">
    <MetadataDescription :metadata="namespace?.metadata" />
    <PodConditions
      title="事件"
      :conditions="namespace?.status?.conditions as any"
    />
  </div>
</template>
<style lang="scss" scoped>
.details-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px;
}
</style>
